<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!-- 引入vue的js文件，放在文件的头部 -->
        <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

        <div id="root">
            <!-- 指令语法：用于解析标签（包括标签的属性、内容、绑定事件等），以v-bind为例 -->
            <!-- 写法1 -->
            <a v-bind:href="url">百度</a>
            <!-- 写法2 -->
            <a :href="url2.url">百度2</a>
        </div>

        
        <script type="text/javascript">
            // 阻止vue启动时候生成生产提示
            Vue.config.productionTip = false    

            // 创建vue实例
            const x = new Vue({
                el:"#root",  // 用于指定vue实例为哪个容器服务，值通常是css选择器字符串，那这个就当成id选择器
                data() {
                    return {
                        url: "https://www.baidu.com/index.htm",
                        url2: {
                            url: "https://www.baidu.com/index.htm"  // 两个url属性不是同一个，通过层级关系区分了，所以不影响
                        }
                    }
                },
            })

            // el 的第二种写法, 这样能更灵活，把关联到标签的操作给拆开了
            // x.$mount('#root')

            
        </script>
    </body>
</html>